<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<style>
    body{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    form{
        height: 200px;
        position: relative;
        right: 30px;
    }
    .art-title{
        /*color: transparent;*/
        /*-webkit-text-stroke: 2px #2c3e50;*/
        color: #2c3e50; text-shadow: black 0.1em 0.1em 0.2em;
        padding: 50px;
    }
</style>
<body>
<h1 class="art-title">物业管理系统</h1>
<form class="layui-form" method="post" name="toLogin">
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input type="text" name="account" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="passwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="login">登陆</button>
            <button type="reset" class="layui-btn layui-btn-primary" onclick="signin()">注册</button>
        </div>
    </div>
</form>
<form class="layui-form" method="post" name="toSignin">
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input type="text" name="account" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="name"  lay-verify="required" placeholder="可选" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="passwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="reset" class="layui-btn" lay-submit lay-filter="signin">注册</button>
            <button type="reset" class="layui-btn layui-btn-primary" onclick="backToLogin()">返回</button>
        </div>
    </div>
</form>
</body>
<script src="/layui/layui.js"></script>
<script>
    let name = window.parent.cookie.get('name');
    let account = window.parent.cookie.get('account');
    let pass = window.parent.cookie.get('passwd');
    let layer;

    layui.use('layer', function () {
        if (name && account && pass) {
            layui.layer.msg('验证登陆中');
            let param = 'account=' + account + '&passwd=' + pass;
            fetch('/check.jsp', {
                method: 'post',
                body: param,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                }
            }).then(d => d.json()).then(d => {
                console.log(d);
                window.parent.cookie.set('account', account, 1);
                window.parent.cookie.set('name', d[0].name, 1);
                window.parent.cookie.set('passwd', pass, 1);
                if (d.length === 1) {
                    layui.layer.msg('登陆成功');
                    window.parent.setEnv({name:d[0].name});
                    window.parent.loginBox.close(window.parent.loginBox.window);
                }else layui.layer.msg('登陆信息过期，请重新登陆');
            });
        }
    });

    layui.use(['form','layer'], function () {
        layer = layui.layer;
        layui.form.render();
        layui.form.on('submit(login)', function (data) {
            let param = "";
            for (let key in data.field) {
                param += '&' + key + '=' + data.field[key];
            }
            let loading = layui.layer.load();
            layui.layer.msg('验证登陆中');
            fetch('/check.jsp', {
                method: 'post',
                body: param,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                }
            }).then(d => d.json()).then(d => {
                layui.layer.close(loading);
                window.parent.cookie.set('account',data.field.account,1);
                window.parent.cookie.set('name',d[0].name,1);
                window.parent.cookie.set('passwd',data.field.passwd,1);
                window.parent.setEnv({name:d[0].name});
                if (d.length===1) window.parent.loginBox.close(window.parent.loginBox.window);
            });
            return false;
        });
        layui.form.on('submit(signin)', function (data) {
            let param = "";
            for (let key in data.field) {
                param += '&' + key + '=' + data.field[key];
            }
            let loading = layui.layer.load();
            fetch('paramTrans.jsp?action=add'+param, {
                method: 'post',
                body: param,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                }
            }).then(d => d.json()).then(d => {
                console.log(d);
                if (d.status === 'ok') {
                    layui.layer.msg('注册成功');
                    window.parent.setEnv({name:data.field.name});
                    window.parent.loginBox.close(window.parent.loginBox.window);
                }
                layui.layer.close(loading);
                window.parent.cookie.set('account',data.field.account,1);
                window.parent.cookie.set('name',data.field.name,1);
                window.parent.cookie.set('passwd',data.field.passwd,1);
            });
            return false;
        });
    });
    let login = document.forms.namedItem('toLogin');
    let sign = document.forms.namedItem('toSignin');
    sign.style.display = 'none';
    function signin() {
        login.style.display = 'none';
        sign.style.display = 'block';
    }
    function backToLogin() {
        login.style.display = 'block';
        sign.style.display = 'none';
    }
</script>
</html>